<template>
    <view class="home_page">
        <view  class="content-top" style="background-color: #F8F8F9;">
            <!-- 顶部导航栏 -->
            <view class="header-nav">
                <view class="nav-left" @tap="goBack">
                    <text class="back-icon">‹</text>
                </view>
                <view class="nav-center">
                    <text class="nav-title">创闪宝通信业务</text>
                </view>
            </view>
            <view class="home-bar">
                <view class="bg"></view>
                <view style="height:1px;"></view>
                <u-row style="justify-content: flex-end; margin: 10px;">
                    <u-col span="12"
                        style="position:relative;z-index: 100; flex: 0 1 auto;font-size: 13px;width:auto; ">
                        <span class="todayGg">今日：{{ currNoticeDay }} </span>
                    </u-col>
                </u-row>

                <view class="home-pane">
                    <view class="pane-content">
                       
                        <u-row align="center">
                            <u-col span="6.5">
                                <view class="small-off" @tap="navToDetail(1, 'left')">今日总交易量(万元)</view>
                                <view class="big-amount big-off mb64" @tap="navToDetail(1, 'left')">
                                    {{todayVal1}}
                                </view>
                                <view class="small-off" @tap="navToDetail(2, 'left')">昨日总交易量(万元)</view>
                                <view class=" big-amount  mb64" @tap="navToDetail(2, 'left')">
                                    {{yesterdayVal1}}
                                </view>
                                <view class="small-off" @tap="navToDetail(3, 'left')">本月总交易量(万元)</view>
                                <view class=" big-amount " @tap="navToDetail(3, 'left')">
                                    {{monthVal1}}
                                </view>
                            </u-col>

                            <u-col span="5.1">
                                <view class="small-off" @tap="navToDetail(1, 'right')">今日总收益(元)</view>
                                <view class="big-amount big-off mb64" @tap="navToDetail(1, 'right')">
                                    {{todayVal2}}
                                </view>
                                <view class="small-off" @tap="navToDetail(2, 'right')">昨日总收益(元)</view>
                                <view class=" big-amount  mb64" @tap="navToDetail(2, 'right')">
                                    {{yesterdayVal2}}
                                </view>
                                <view class="small-off" @tap="navToDetail(3, 'right')">本月总收益(元)</view>
                                <view class=" big-amount " @tap="navToDetail(3, 'right')">
                                    {{monthVal2}}
                                </view>
                            </u-col>

                        </u-row>
                    </view>
                  <!--  <view class="cneterPoint">
                        <view class="justPoint" v-for="(item,index) in 2" :class="{'pieked':index+1 === rightName}">
                        </view>
                    </view>
                    <view class="rightSele" @click="rightSele()">
                        {{rightName==1?'小微':'商家'}}
                    </view> -->
                </view>
            </view>

            <view class="homeBlock">
                <view class="homeLabel">工作台</view>
                <view class="homeMenuList">
                    <view class="homeMenuLi" @tap="operSubsidiary(2)">
                        <view class="homeMenuLiIcon homeMenuLiIcon0"></view>
                        <view class="homeMenuLiText">设备管理</view>
                    </view>
                    <view class="homeMenuLi" @tap="operSubsidiary(7)">
                        <view class="homeMenuLiIcon homeMenuLiIcon1"></view>
                        <view class="homeMenuLiText">机构管理</view>
                    </view>
                    <view class="homeMenuLi" @tap="navToGongZhongHao">
                        <view class="homeMenuLiIcon homeMenuLiIcon2"></view>
                        <view class="homeMenuLiText">政策解读</view>
                    </view>
                    <view class="homeMenuLi" @tap="operSubsidiary(6)">
                        <view class="homeMenuLiIcon homeMenuLiIcon3"></view>
                        <view class="homeMenuLiText">拓展下级</view>
                    </view>

                    <view class="homeMenuLi" @tap="operSubsidiary(11)">
                        <view class="homeMenuLiIcon homeMenuLiIcon6"></view>
                        <view class="homeMenuLiText">代理管理</view>
                    </view>
                    <view class="homeMenuLi" @tap="operSubsidiary(12)">
                        <view class="homeMenuLiIcon homeMenuLiIcon6"></view>
                        <view class="homeMenuLiText">商户红包</view>
                    </view>
                </view>
            </view>
        
        </view>


   </view>
</template>


<script>
    import util from '@/common/utils'
    import mosoweTextScrollRow from '@/components/mosowe-text-scroll-row/mosowe-text-scroll-row.vue'
    import dayjs from 'dayjs';
    // #ifdef APP-PLUS
    import checkappupdate from '@/js_sdk/wonyes-checkappupdate/wonyes/checkappupdate.js'
    // #endif

    export default {
        components: {
            mosoweTextScrollRow,
        },
        data() {
            return {
                todayVal1: '0.00',
                yesterdayVal1: '0.00',
                monthVal1: '0.00',
                todayVal2: '0.00',
                yesterdayVal2: '0.00',
                monthVal2: '0.00',
                rightName: 1, //1小微 2商家
                hrefUrl: `http://hb.99clzs.com/#/?id=${util.getToken()}`,
                todayDate: new Date(),
               }
        },
        onLoad() {
      

        },
        computed: {
            currNoticeDay() {
                 return dayjs(this.todayDate).format('MM月DD日');
            },
        },
        methods: {
            goBack() {
                uni.navigateBack();
            }
        }
    
    };
</script>

<style lang="scss" scoped>
    .home_page {
        position: relative;

        // 顶部导航栏样式
        .header-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 30rpx 0 30rpx;
            background: #e2e9fc;
            position: relative;
            z-index: 100;

            .nav-left {
                width: 60rpx;
                height: 60rpx;
                display: flex;
                align-items: center;
                justify-content: center;

                .back-icon {
                    font-size: 48rpx;
                    color: #333;
                    font-weight: bold;
                }
            }

            .nav-center {
                flex: 1;
                text-align: center;

                .nav-title {
                    font-size: 36rpx;
                    font-weight: bold;
                    color: #333;
                }
            }

            .nav-right {
                width: 60rpx;
                display: flex;
                justify-content: flex-end;
            }
        }

        .todayGg {
            margin-right: 10rpx;
            padding: 4rpx 16rpx 4rpx 10rpx;
            border-radius: 10px;
            border: 1px solid #999;
        }

        .home-bar {

            position: relative;

            .pane-filter {
                margin-top: -10rpx;
                margin-right: -10rpx;
                padding: 10rpx 10rpx 10rpx 40rpx;
            }

            .bg {
                background: #e2e9fc;
                height: 250px;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 250px;
                z-index: 1;
            }

            .head-bar {
                position: relative;
                z-index: 10;
            }

            // background: #e2e9fc;

            .bar-title-icon {
                width: 90%;
                margin-left: 2vw;
            }

            .message {
                width: 36px;
                width: 9vw;
                margin-right: 1vw;
            }

            .announcement {
                position: relative;
                z-index: 10;
                padding-left: 4vw;
            }

            .announcement-title {
                font-size: 13px;
                color: #999;
            }
        }

        .t-center {
            text-align: center;
        }

        .home-pane {
            position: relative;
            z-index: 10;
            // background: #6682ef;
            // margin: 4vw;
            // border-radius: 30rpx;
            // box-shadow: 1px 1px 1px #ccc;
            // font-size: 13px;
            margin: 0 auto;
            padding: 30rpx 50rpx 15rpx 50rpx;
            box-sizing: border-box;
            width: 710rpx;
            // height: 550rpx;
            background: #427AF5;
            box-shadow: 0rpx 3rpx 20rpx 0rpx #427AF5;
            border-radius: 26rpx;

            .pane-content {
                // padding: 2vw;
                color: white;
                padding-bottom: 0;
                position: relative;
                // margin-bottom: -20rpx;

                .iconTip {
                    position: absolute;
                    right: -22rpx;
                    top: -22rpx;
                    width: 32rpx;
                    height: 32rpx;
                }


            }

            .cneterPoint {
                height: 30rpx;
                line-height: 30rpx;
                text-align: center;
                width: 100%;
                display: flex;
                justify-content: center !important;
                margin-top: 10rpx;

                .justPoint {
                    width: 15rpx;
                    height: 15rpx;
                    background: #000000;
                    opacity: 0.2;
                    border-radius: 50%;
                    margin-left: 10rpx;
                }

                .pieked {
                    background-color: #fff;
                    opacity: 0.999;
                }
            }

            .rightSele {
                position: absolute;
                right: 22rpx;
                bottom: 20rpx;
                width: 48rpx;
                height: 48rpx;
                text-align: center;
                border-radius: 50%;
                color: #5079ed;
                font-size: 20rpx;
                line-height: 48rpx;
                background-color: #fff;
            }


            .big-amount {
                font-size: 46rpx !important;
                // margin-bottom: 20px;
                font-size: 42rpx;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
            }

            .normal-amount {
                font-size: 18px;
            }

            .small-off {
                margin-bottom: 10px;
                font-size: 30rpx;
                font-family: SimHei;
                font-weight: 400;
                color: #FFFFFF;
            }

            .mb64 {
                margin-bottom: 40rpx !important;
            }

            .big-off {
                margin-bottom: 26rpx;
            }

            .pane-bottom {
                padding: 10px;
                padding-top: 6rpx;
                padding-bottom: 0px;
                background: #4f6ad5;
                color: #fff;
                border-bottom-left-radius: 30rpx;
                border-bottom-right-radius: 30rpx;

                .bottom-item {
                    position: relative;
                }

                .item-amount {
                    position: relative;
                    bottom: -18px;
                }

                .small-title {
                    color: #eee;
                    margin-bottom: -15px;
                }

                .today {
                    background: #f8a772;
                    position: relative;
                    left: 10px;
                    bottom: -16px;
                }

                .yesterday {
                    background: #ff6501;
                    position: relative;
                    bottom: -8px;
                }

                .month {
                    background: #ca5204;
                    position: relative;
                    left: -10px;
                }
            }
        }

  

        .arrow-down {
            width: 2.5vw;
            margin-left: 5px;
            margin-top: 3px;
        }



        .content {
            position: relative;
            height: 300rpx;
            padding-left: 15upx;
            padding-right: 15upx;
        }

        swiper {
            width: 100%;
            height: 100%;
        }

        swiper image {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 15rpx;
        }

        .dots {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 20rpx;
            display: flex;
            justify-content: center;
        }

        .dot {
            margin: 0 8rpx;
            width: 14rpx;
            height: 14rpx;
            background: #fff;
            border-radius: 8rpx;
            transition: all .6s;
        }

        .dot.active {
            width: 24rpx;
            background: red;
        }

        .wrap {
            padding-left: 0upx;
            padding-right: 0upx;
            margin: 4vw;
            background: white;
            border-radius: 2vw;
            padding: 2rpx 2vw;
            margin-top: 10rpx;
            margin-bottom: 20rpx;
            box-shadow: 1px 1px 1px #ccc;
        }

        .img-item {
            padding: 14rpx;
            box-sizing: border-box;
            width: 100rpx;
            height: 100rpx;
            line-height: 110rpx;
            text-align: center;

            .justImg {
                width: 68rpx;
                height: 64rpx;
            }
        }

        .img-item.special {
            padding: 10rpx 14rpx 18rpx 14rpx;
        }

        .img-item.cycle-icon {
            background: #eee;
            padding: 20rpx;
            border-radius: 50px;
            width: 100rpx;
            height: 100rpx;
        }

        .item-text {
            font-size: 14px;
        }

        .u-row {
            margin: 10upx 0;
        }


        .view_right {
            display: inline;
            float: right;
        }



        .left-right {
            justify-content: space-between;
        }

        .view_justify_left {
            display: flex;
            flex-direction: column;
        }

        .margin_distance {
            margin-top: 10upx;
            margin-bottom: 10upx;
        }

        .margin_distance_lr {
            display: flex;
            margin-top: 10upx;
            margin-left: 15upx;
            margin-right: 15upx;
        }

        .body_bg {
            height: 120upx;
            background-color: #FFFFFF;
            border-radius: 8rpx;
            margin-top: 30upx;
            margin-bottom: 15upx;
        }

        .body_bg_180 {
            height: 180upx;
            background-color: #FFFFFF;
            border-radius: 8rpx;
            margin-top: 30upx;
            margin-bottom: 15upx;
        }

        .con-pro {
            margin-top: 40upx;
            margin-left: 20upx;
            margin-right: 20upx;
            color: cornflowerblue;
        }

        .img-item {
            width: 100rpx;
            height: 100rpx;
        }

        .img-item-s {
            width: 20rpx;
            height: 30rpx;
            margin-left: 20rpx;
        }
        .homeBlock {
            background-color: white;
            margin-top: 20rpx;
            padding: 20rpx;

            .homeLabel {
                margin-bottom: 20rpx;
                font-size: 38rpx;
                font-weight: bold;
                color: #000000;
                line-height: 65rpx;
            }

            .homeMenuList {
                display: flex;
                // justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
                margin-top: -20rpx;

                .homeMenuLi {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-flow: column;
                    width: 25%;
                    margin-top: 30rpx;

                    .homeMenuLiIcon {
                        width: 79rpx;
                        height: 79rpx;
                        background: #427AF5;
                        border-radius: 23rpx;
                        background-repeat: no-repeat;
                        background-position: center center;
                        background-size: 100% 100%;
                        background-image: url(../../static/newIcon/p_001.png);
                    }

                    // .homeMenuLiIcon0 {
                    //     background-image: url(../../static/img/home/icon_menu_0.png);
                    // }

                    // .homeMenuLiIcon1 {
                    //     background-image: url(../../static/img/home/icon_menu_1.png);
                    // }

                    // .homeMenuLiIcon2 {
                    //     background-image: url(../../static/img/home/icon_menu_2.png);
                    // }

                    // .homeMenuLiIcon3 {
                    //     background-image: url(../../static/img/home/icon_menu_3.png);
                    // }

                    // .homeMenuLiIcon4 {
                    //     background-image: url(../../static/img/home/icon_menu_4.png);
                    // }

                    // .homeMenuLiIcon5 {
                    //     background-image: url(../../static/img/home/icon_menu_5.png);
                    // }

                    // .homeMenuLiIcon6 {
                    //     background-image: url(../../static/img/home/icon_menu_6.png);
                    // }

                    // .homeMenuLiIcon7 {
                    //     background-image: url(../../static/img/home/icon_menu_7.png);
                    //     width: 79rpx;
                    //     height: 79rpx;
                    //     border-radius: 23rpx;
                    //     background-repeat: no-repeat;
                    //     background-position: center center;
                    //     background-size: 100% 100%;
                    // }

                    .homeMenuLiText {
                        font-size: 27rpx;
                        font-weight: 400;
                        color: #000000;
                        margin-top: 14rpx;



                    }
                }
            }

            .swiper {
                height: 206rpx;
            }

            .swiper-item {
                display: block;
                height: 206rpx;
                line-height: 206rpx;
                text-align: center;
                border-radius: 20rpx;
            }

            .swiper-item-img {
                width: 722rpx;
                height: 206rpx;
                border-radius: 13rpx;
            }

            .home_gongzhonghao {
                width: 340rpx;
                margin-top: 10rpx;
                border-radius: 13rpx;
            }
        }
    }
</style>